<template>
  <div class="editphoto-view" :style="{width: 'auto'}">
    <div class="outsize-tips">
      <span v-if="currentTab==0">选中想要保留的区域，再次点击取消选中，未保留的AI自动生成</span>
      <span v-if="currentTab==1">选择想要保留的区域，未保留的AI自动生成</span>
      <span v-if="currentTab==2">涂抹想要保留的区域，未保留的AI自动生成</span>
      <span v-if="currentTab==3"><el-icon class="text-icon"><WarningFilled /></el-icon> 图片最高可提升至4000像素长/宽，当前功能每计算一次都需要消费算力，请谨慎操作。生成结果可在图库查询。</span>
      <span v-if="currentTab==4"><el-icon class="text-icon"><WarningFilled /></el-icon> 请涂抹需要消除的内容，并发起处理。当前功能每计算一次都需要消费算力，请谨慎操作。生成结果可在图库查询。</span>
      <span v-if="currentTab==5"><el-icon class="text-icon"><WarningFilled /></el-icon> 无损放大不失真，当前功能每计算一次都需要消费算力，请谨慎操作。生成结果可在图库查询。</span>
    </div>

    <div class="editphoto-tabs">
      <div class="btn-tabs">
        <div class="tabs-title">
            <span v-if="[0,1,2].includes(currentTab)">涂抹方式</span>
            <span v-if="[3].includes(currentTab)">高清修复</span>
            <span v-if="[4].includes(currentTab)">涂抹擦除</span>
            <span v-if="[5].includes(currentTab)">AI扩图</span>
            <span v-if="[6,7,8].includes(currentTab)">局部重绘</span>
        </div>
        <div class="tab-btn"  v-for="(v,i) in tabs" :key="'tabs_'+i" v-if="[0,1,2].includes(currentTab)" :class="currentTab==[0,1,2][i] && 'current'" @click="toggleTab([0,1,2][i])">{{v}}</div>
        <div class="tab-btn"  v-for="(v,i) in tabs2" :key="'tabs_'+i" v-if="[6,7,8].includes(currentTab)" :class="currentTab==[6,7,8][i] && 'current'" @click="toggleTab([6,7,8][i])">{{v}}</div>
      </div>
      <div class="btn-tabs-right">
        <div v-if="[0,1,2,4,6,7,8].includes(currentTab)">
          <el-icon :size="20" class="btn-refresh" @click="reset"><Refresh /></el-icon>
        </div>
        <el-button type="primary" @click="comfirm">{{comfirmText}}</el-button>
      </div>
    </div>

    <Select ref="select" v-show="currentTab==0" :src="src" :width="680" :height="500" @comfirm="onComfirm" />
    <Reserve ref="reserve" v-show="currentTab==1" :src="src" :width="680" :height="500" :clothList="clothList" @comfirm="onComfirm" />
    <Smear ref="smear" v-show="[2,4].includes(currentTab)" :src="src" :width="680" :height="500" :computeing="computeing" @comfirm="onComfirm" :showEraseBtn="currentTab==4" @eraseClick="eraseClick"/>
    <Repair ref="repair" v-show="currentTab==3" :src="src" :width="680" :height="500" :computeing="computeing"  @comfirm="onComfirm" @repairClick="repairClick" />
    <Expand ref="expand" v-show="currentTab==5" :src="src" :width="680" :height="500" @comfirm="onComfirm" />
    <ChangeColor ref="expand" v-show="currentTab==6" :src="src" :width="680" :height="500" @comfirm="onComfirm" />
    <ChangeTexture ref="expand" v-show="currentTab==7" :src="src" :width="680" :height="500" @comfirm="onComfirm" />
    <ItemRedraw ref="expand" v-show="currentTab==8" :src="src" :width="680" :height="500" @comfirm="onComfirm" />

  </div>
</template>

<style lang="scss" scoped>
.editphoto-view {
  position: relative;
  .outsize-tips {
    position: absolute;
    top: -44px;
    left: 50%;
    width: 100%;
    color: #ffffff;
    transform: translateX(-50%);
    .text-icon {
      vertical-align: middle;
    }
  }
}
.editphoto-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  .btn-tabs {
    display: flex;
    align-items: center;
    .tabs-title {
      font-weight: bold;
      padding-right: 8px;
      font-size: 20px;
    }
    .tab-btn {
      position: relative;
      padding: 0 8px;
      border: 1px solid #ccc;
      border-width: 0 0 0 1px;
      cursor: pointer;
      &::after {
        content: '';
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: -4px;
        height: 2px;
        background: #409eff;
        opacity: 0;
        transition: opacity ease-in 0.2s;
      }
      &.current {
        font-weight: bold;
        color: #409eff;
        &::after {
          opacity: 1;
        }
      }
    }
  }
  .btn-tabs-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .btn-refresh {
    cursor: pointer;
    margin: 4px 16px 0 0;
  }
}
</style>
<script>
/** 图片编辑模块 */
/* eslint-disable */
import Select from './Select'
import Reserve from './Reserve'
import Smear from './Smear'
import Repair from './Repair'
import Expand from './Expand'
import ChangeColor from './ChangeColor'
import ChangeTexture from './ChangeTexture'
import ItemRedraw from './ItemRedraw'
export default {
  name: 'EditPhoto',
  components: { Select, Reserve, Smear, Repair, Expand, ChangeColor, ChangeTexture, ItemRedraw },
  props: {
    // 图片url
    src: {
      type: String,
      default: ''
    },
    // 打开的功能类型tab
    model: {
      type: Number,
      default: 2
    },
    // 选中保留区域的参数
    clothData: {
      type: Array,
      default: []
    },
    computeing: {
      type: Boolean,
      default: false
    },
    // 完成按钮的文字
    comfirmText: {
      type: String,
      default: '完成'
    },
  },
  data () {
    return {
      // tabs: ['编辑选区', '保留部分', '涂抹保留'],
      tabs: ['', '保留部分', '涂抹保留'],             // 菜单1，对应[0,1,2]
      tabs2: ['选取改色', '选取改纹理', '物品重绘'],    // 菜单2，对应[6,7,8]
      tabsName: {
        '0': 'select',        // 编辑选区
        '1': 'reserve',       // 保留部分
        '2': 'smear',         // 涂抹保留
        '3': 'repair',        // 高清还原
        '4': 'smear',         // 涂抹擦除
        '5': 'expand',        // AI扩图
        '6': 'changeColor',   // 选取改色
        '7': 'changeTexture', // 选取改纹理
        '8': 'itemRedraw',    // 物品重绘
      },
      currentTab: 2, // 当前功能tab
      clothList: [],
    }
  },
  mounted() {
  },
  watch: {
    // 当前模块
    model: {
      handler() {
        this.currentTab = this.model
      },
      immediate: true
    },
    // 保留区域参数
    clothData: {
      handler() {
        this.clothList = this.clothData
      },
      immediate: true
    }
  },
  methods: {
    /** 切换tab */
    toggleTab(i) {
      this.currentTab = i
      this.$emit('changeTab', i)
    },

    /** 重置 */
    reset() {
      let $select = this.$refs['select'] || null
      let $reserve = this.$refs['reserve'] || null
      let $smear = this.$refs['smear'] || null
      $select && $select.reset()
      $reserve && $reserve.reset()
      $smear && $smear.reset()
    },

    /** 完成 */
    comfirm() {
      let mark = null
      let name = this.tabsName[''+this.currentTab]
      if (name) {
        this.output(name)
      }
    },

    /** 输出遮罩 */
    output(refname) {
      console.log(refname);
      this.$refs[refname].output()
    },

    /** 确认输出 */
    onComfirm(data) {
      this.$emit('comfirm', data)
    },

    /** 浮动按钮点击 */
    eraseClick(data) {
      this.$emit('eraseClick', data)
    },
    /** 还原按钮点击 */
    repairClick() {
      this.$emit('repairClick', true)
    },
    /** AI扩图按钮点击 */
    expandClick() {
      this.$emit('expandClick', true)
    },
  }
}
</script>
